<template>
  <div class="SlideBar" ref="sliBar">
   <ul class="slide-waper" ref="sliWap">
     <li v-for="(item,index) in fenleiLists" 
     :key="index" class="slide-item" 
     :style="{color:currrentIndex==index ? '#eb4450':'#333',background:currrentIndex== index ? '#fff':'#f4f4f4'}" @click="changeData(item,index)">
    {{item.cat_name}}
     </li>
   </ul>
  </div>
</template>

<script>
import {getFenLeiList} from '../../api/fenlei/index'
export default {
   name:"SlideBar",
   data(){
     return{
       fenleiLists:[],
       currrentIndex:0
     }
   },
   created(){
     getFenLeiList().then(res=>{
       console.log(res);
       this.fenleiLists=res.data.message
         this.$emit('emitData',this.fenleiLists[0])
     })
   },
   methods:{
      changeData(v,i){
        this.currrentIndex=i
        this.$emit('emitData',v)
      }
   },
   mounted(){//挂载完毕的生命周期的函数
   let sY,nY
     this.$refs.sliBar.ontouchstart=function(e){
          console.log(e.targetTouches[0].clientY);
          sY=e.targetTouches[0].clientY
     }
     this.$refs.sliBar.ontouchend=(e)=>{
      console.log(e.changedTouches[0].clientY);
      nY=e.changedTouches[0].clientY
      if(Math.abs(nY-sY)>5){
       var t=this.$refs.sliWap.offsetTop
       var nT=nY-sY + t
       if(nT>0){
         nT=0
       }
      this.$refs.sliWap.style.top=nT+'px'

     }
     }
     
   }
}
</script>

<style scoped lang="less">
.SlideBar{
  width: 100%;
  height: 100%;
  overflow:hidden;
  position: relative;
  .slide-waper{
  width: 100%;
  position:absolute;
  top: 0;
  left: 0;
    .slide-item{
      width: 100%;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid #eee;
      background: #f4f4f4;
    }
}


}

</style>

